<template>
	<view class="content">
		<view class="fan">
			<image @click="fanhui" src="../../../static/fan.png" mode=""></image>
			<view class="qu" @click="fanhui">取消</view>
		</view>
		<view class="body">
			<p class="tit">手机号注册</p>
			<view class="Hong">
				<input type="text" placeholder="请输入手机号" maxlength="11" v-model="shojihao" />
			</view>
			<view class="Hong_a">
				<input type="text" placeholder="请输入6位验证码" maxlength="6" v-model="yanzma" />
				<view class="Hong_b" v-if="yanzhen" @click="huoqu">获取验证码</view>
				<view class="Hong_b" v-if="!yanzhen">
					<u-count-down
						:timestamp="timestamp"
						:show-days="false"
						:show-hours="false"
						:show-minutes="false"
						bg-color="#EEF2F5"
						@end="jieshu"
					></u-count-down>
				</view>
			</view>
			<view class="Hong_a">
				<input
					:type="mima_look == 1 ? 'password' : 'text'"
					placeholder="请输入6-20位数字或字母组合"
					maxlength="20"
					v-model="mima"
					style="padding-left: 20rpx;  width: 400rpx; border: none; background-color: #eef2f5; outline: none"
				/>
				<image
					v-show="mima_look == 1"
					@click="look_a"
					src="../../../static/yingchang.png"
					mode=""
				></image>
				<image
					v-show="mima_look == 2"
					@click="look_b"
					src="../../../static/xinashi.png"
					mode=""
				></image>
			</view>
			<view class="Hong_a">
				<input type="text" placeholder="请输入邀请码" maxlength="6" v-model="yaoqingma" />
			</view>
			<view class="denglu" @click="zhu">注 册</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 59,
			yanzhen: true,
			mima_look: true,
			look: 1,
			yan_fanhui: '',
			shojihao: '',
			yanzma: '',
			mima: '',
			yaoqingma: '',
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#FE3548',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		async yanzhengma() {
			let obj = {
				mobile: this.shojihao,
			};
			const res = await this.$u.post('api/index/sendSms', obj, {});
			console.log(res, 2222222222222);
			uni.$showMsg(res.msg);
		},
		async zhu_ce() {
			let obj = {
				mobile: this.shojihao,
				password: this.mima,
				code: this.yanzma,
				push: this.yaoqingma,
			};
			const res = await this.$u.post('api/index/register', obj, {});
			console.log(res.msg, 8888888888888);
			uni.$showMsg(res.msg);
			if (res.msg == '注册成功,请登录') {
				wx.navigateTo({
					url: './deng',
				});
			}
		},
		fanhui() {
			uni.navigateBack({
				delta: 1,
			});
		},
		jieshu() {
			this.yanzhen = true;
		},
		async huoqu() {
			

			if (this.shojihao == '') {
				uni.$showMsg('请先填写正确的手机号');
				
			} else {
				
				this.yanzhen = false;
				let obj = {
					mobile: this.shojihao,
				};
				const res = await this.$u.post('api/index/sendSms', obj, {});

				//uni.$showMsg(res.msg);
			}
		},
		look_a() {
			this.mima_look = 2;
		},
		look_b() {
			this.mima_look = 1;
		},
		zhu() {
			if (this.shojihao == '') {
				uni.$showMsg('请先填写正确的手机号');
			} else if (this.yanzma == '') {
				uni.$showMsg('请正确填写验证码');
			} else if (this.mima == '') {
				uni.$showMsg('请正确填写密码');
			} else if (this.yaoqingma == '') {
				uni.$showMsg('请正确填写邀请码');
			} else {
				this.zhu_ce();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.body {
	padding-top: 100rpx;
	padding-left: 100rpx;
}

.fan {
	width: 700rpx;
	margin-top: 60rpx;
	margin-left: 20rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	image {
		width: 20rpx;
		height: 37rpx;
	}

	.qu {
		width: 80rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		color: #666666;
		font-size: 28rpx;
	}
}

.tit {
	width: 300rpx;
	height: 50rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 50rpx;
	color: #333333;
	padding-top: 40rpx;
	margin-left: 24rpx;
}

.Hong {
	width: 460rpx;
	margin-left: 20rpx;
	height: 58rpx;
	background-color: #eef2f5;
	margin-top: 80rpx;
	display: flex;
	align-items: center;
	border-radius: 10rpx;

	input {
		padding: 0 20rpx;
		width: 460rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
	}
}

.Hong_a {
	border-radius: 10rpx;
	width: 460rpx;
	margin-left: 20rpx;
	height: 58rpx;
	background-color: #eef2f5;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	display: flex;
	justify-content: space-between;

	input {
		padding: 0 20rpx;
		width: 400rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.Hong_b {
		width: 180rpx;
		height: 58rpx;
		line-height: 58rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: right;
		margin-right: 20rpx;
		color: #fe3548;
	}

	image {
		width: 40rpx;
		height: 31rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}
}

.denglu {
	width: 460rpx;
	height: 90rpx;
	background-color: #4b8eff;
	margin-left: 20rpx;
	margin-top: 50rpx;
	color: #ffffff;
	line-height: 90rpx;
	text-align: center;
	font-weight: 800;
	font-size: 40rpx;
	border-radius: 10rpx;
}
</style>
